<template>
  <el-dialog title="申请详情" :visible.sync="detailDialogVisible"
             top="0%" custom-class='dialog_right withdraw-deposit-detail dialogScroll_detail'
             @open="openDialog" @close="closeDialog">
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight- (detailInfo.status==='WaitPlayMoney'?200:110))+'px'}]">
      <div class="contentDiv detail-box">
        <div class="detail-title">
          <div class="name">
            <span>{{ detailInfo.seller.company }}</span>
            <span>{{ detailInfo.seller.bankCardNumber }}</span>
          </div>
          <div class="area">{{ detailInfo.seller.bankAddress }}</div>
        </div>
        <div class="detail-list-box">
          <el-row :gutter="20" class="detail-item">
            <el-col :span="5">店铺名称</el-col>
            <el-col :span="19">{{ detailInfo.seller.shopName }}</el-col>
          </el-row>
          <el-row :gutter="20" class="detail-item">
            <el-col :span="5">交易银行</el-col>
            <el-col :span="19">{{ detailInfo.seller.tradingBank }}</el-col>
          </el-row>
          <el-row :gutter="20" class="detail-item">
            <el-col :span="5">开户支行</el-col>
            <el-col :span="19">{{ detailInfo.seller.openBankBranch }}</el-col>
          </el-row>
          <el-row :gutter="20" class="detail-item">
            <el-col :span="5">流水号</el-col>
            <el-col :span="19">{{ detailInfo.number }}</el-col>
          </el-row>
          <el-row :gutter="20" class="detail-item">
            <el-col :span="5">提现时间</el-col>
            <el-col :span="19">{{ detailInfo.takeMoneyDate | filterTime }}</el-col>
          </el-row>
          <el-row :gutter="20" class="detail-item">
            <el-col :span="5">提现金额</el-col>
            <el-col :span="19">￥{{ detailInfo.takeMoneyStr }}</el-col>
          </el-row>
          <el-row :gutter="20" class="detail-item">
            <el-col :span="5">交易分佣</el-col>
            <el-col :span="19">￥{{ detailInfo.commissionMoneyStr }}</el-col>
          </el-row>
          <el-row :gutter="20" class="detail-item">
            <el-col :span="5">实际打款</el-col>
            <el-col :span="19">￥{{ detailInfo.realTakeMoneyStr }}</el-col>
          </el-row>
          <el-row :gutter="20" class="detail-item"
                  v-if="detailInfo.status==='PlayMoneyed'">
            <el-col :span="5">打款流水号</el-col>
            <el-col :span="19">{{ detailInfo.transferNumber }}</el-col>
          </el-row>
          <el-row :gutter="20" class="detail-item"
                  v-if="detailInfo.status==='PlayMoneyed'">
            <el-col :span="5">打款时间</el-col>
            <el-col :span="19">{{ detailInfo.transferDate | filterDate }}</el-col>
          </el-row>
          <el-row :gutter="20" class="detail-item"
                  v-if="detailInfo.status==='PlayMoneyed'">
            <el-col :span="5">备注</el-col>
            <el-col :span="19">{{ detailInfo.remark }}</el-col>
          </el-row>
        </div>

        <el-form :model="submitForm" :rules="submitFormRules" ref="submitForm"
                 v-if="detailInfo.status==='WaitPlayMoney'" label-width="96px">
          <el-form-item label="打款流水号" prop="number">
            <el-input v-model='submitForm.number' placeholder="请输入打款流水号（必填）"></el-input>
          </el-form-item>

          <el-form-item label="打款时间" prop="date">
            <el-date-picker v-model="submitForm.date" type="date"
                            placeholder="请选择打款时间（必选）" :editable="false"></el-date-picker>
          </el-form-item>

          <el-form-item label="备注" prop="remark">
            <el-input v-model='submitForm.remark' placeholder="请输入备注"
                      type="textarea" :autosize="{minRows:3}" resize="none"></el-input>
          </el-form-item>
        </el-form>

      </div>
    </el-scrollbar>

    <div slot="footer" class="dialog-footer"
         v-if="detailInfo.status==='WaitPlayMoney'">
      <el-button type="primary"  class="btn-primary" :disabled="isSubmitLoading"
                 @click="handleSubmitForm">提交</el-button>
      <el-button type='primary' class='btn-cancel' @click="closeDialog">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import settlementService from '../../../services/settlement'
  import {mapState} from 'vuex'
  export default {
    name: 'withdrawDepositDetail',

    props: ['dialogVisible', 'detailInfo'],

    watch: {
      dialogVisible: function (value) {
        this.detailDialogVisible = value;
      }
    },
    computed: mapState({
      bodyHeight: state => state.global.bodyHeight
    }),
    filters: {
      filterStatus (value) {
        if (value === 'WaitPlayMoney') {
          return '未打款';
        } else if (value === 'PlayMoneyed') {
          return '已打款';
        } else {
          return '';
        }
      },
      filterDate (value) {
        if (value) {
          return new Date(value).pattern('yyyy-MM-dd');
        } else {
          return '';
        }
      },
      filterTime (value) {
        if (value) {
          return new Date(value).pattern('yyyy-MM-dd HH:mm');
        } else {
          return '';
        }
      }
    },

    methods: {
      openDialog () {
        this.submitForm.id = this.detailInfo.id;
      },

      handleSubmitForm () {
        let submitData = {};
        this.$refs['submitForm'].validate((valid)=>{
          if (valid) {
            this.isSubmitLoading = true;
            submitData = this.submitForm;
            submitData.date = submitData.date.pattern('yyyy-MM-dd');

            settlementService.handleWithdrawDepositServer (submitData, ()=> {
              this.isSubmitLoading = false;
              this.$message.success('提交成功');
              this.$emit('submitSuccess');
              this.detailDialogVisible = false;
            }, ()=> {
              this.isSubmitLoading = false;
            });
          }
        })
      },

      closeDialog () {
        if (this.$refs['submitForm']) {
          this.$refs['submitForm'].resetFields();
        }
        this.$emit('closeDialog');
      }
    },

    data () {
      let checkNumber = (rule, value, callback) => {
        if (value) {
          let reg = new RegExp("[A-Za-z0-9]");
          if (!reg.test(value)) {
            callback(new Error('请输入含有英文或数字的打款流水号'));
          } else if (value.length > 50) {
            callback(new Error('请输入不超过50个字符的打款流水号'));
          } else {
            callback();
          }
        } else {
          callback(new Error('请输入打款流水号'));
        }
      };
      let checkRemark = (rule, value, callback) => {
        if (value) {
          let reg = new RegExp("[A-Za-z\u4e00-\u9fa5]");
          if (!reg.test(value)) {
            callback(new Error('请输入含有中文或英文的备注'));
          } else if (value.length > 200) {
            callback(new Error('请输入不超过200个字符的备注'))
          } else {
            callback();
          }
        } else {
          callback();
        }
      };

      return {
        detailDialogVisible: false,
        isSubmitLoading: false,
        submitForm: {
          date: null,
          id: null,
          number: null,
          remark: ''
        },
        submitFormRules: {
          date: [
            { required: true, message: '请选择打款时间'}
          ],
          number: [
            { validator: checkNumber }
          ],
          remark: [
            { validator: checkRemark }
          ]
        }
      }
    }
  }

</script>

<style lang="less">
  @import '../../../assets/style/main.less';
  .withdraw-deposit-detail {
    .detail-box {
      width: 96%;
      .detail-list-box {
        margin: 20px 0 40px 0;
        padding: 30px;
        background-color: #F9FAFA;
      }
      .el-row {
        line-height: 40px;
      }
      .el-col-5 {
        color: @fontColorThree;
        text-align: right;
      }
      .detail-title {
        .name {
          span:first-child {
            padding-right: 20px;
            font-size: 20px;
            color: @fontColorOne;
          }
          span:last-child {
            font-size: 16px;
            color: @fontColorThree;
          }
        }
        .area {
          padding-top: 10px;
          font-size: 18px;
          color: @fontColorTwo;
        }
      }
      .detail-item {
        .el-col:nth-child(2) {
          word-break: break-all;
        }
      }
    }
    .el-input__inner {
      word-break: break-all;
    }
  }
</style>
